<template>
  <div id="app">
    <div class="tabbar" v-if="showTabbar">
      <ul>
        <router-link to="/home" tag="li">
          <i>
            <img src="./assets/image/5.png" alt="" v-if="show == 'Home'" />
            <img src="./assets/image/0.png" alt="" v-else />
          </i>
          <span>首页</span>
        </router-link>
        <router-link to="/category" tag="li">
          <i>
            <img src="./assets/image/6.png" alt="" v-if="show == 'Category'" />
            <img src="./assets/image/1.png" alt="" v-else />
          </i>
          <span>分类</span>
        </router-link>
        <router-link to="/discover" tag="li">
          <i>
            <img src="./assets/image/7.png" alt="" v-if="show == 'Discover'" />
            <img src="./assets/image/2.png" alt="" v-else />
          </i>
          <span>发现</span>
        </router-link>
        <router-link to="/shopcart" tag="li">
          <i>
            <img src="./assets/image/8.png" alt="" v-if="show == 'Shopcart'" />
            <img src="./assets/image/3.png" alt="" v-else />
          </i>
          <span>购物车</span>
        </router-link>
        <router-link to="/person" tag="li">
          <i>
            <img src="./assets/image/9.png" alt="" v-if="show == 'Person'" />
            <img src="./assets/image/4.png" alt="" v-else />
          </i>
          <span>我</span>
        </router-link>
      </ul>
    </div>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: "home",
      showTabbar: true,
    };
  },
  watch: {
    $route() {
      this.show = this.$route.name;
      this.showTabbar = this.$route.meta.show;
    },
  },
};
</script>
<style lang="less">
@import "./fonts/iconfont.css";
@import "./styles/common.css";
.router-link-active {
  color: #f20e28;
  font-size: 1.2rem;
}
#app {
  position: relative;
}
.tabbar {
  position: fixed;
  width: 100%;
  height: 4.9rem;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1999;
  background: #fff;
  border-top: 1px solid #e3e8ee;
  box-sizing: content-box;
  ul {
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    li {
      width: 20%;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      i {
        display: flex;
        width: 2.5rem;
        height: 2.5rem;
        img {
          display: block;
          width: 100%;
        }
      }
    }
  }
}
.main {
  margin-top: 8.5rem;
}
</style>
